<template>
  <div class="addOrEdit">
    <el-dialog
      :before-close="handClose"
      center
      width="30%"
      :title="title"
      :visible.sync="off"
      append-to-body
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        size="mini"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商编号" prop="providerNo">
              <el-input v-model.number="ruleForm.providerNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称:" prop="providerName">
              <el-input v-model.trim="ruleForm.providerName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model.trim="ruleForm.contact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="座机:" prop="phone">
              <el-input v-model.trim="ruleForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" prop="cellPhone">
              <el-input v-model.trim="ruleForm.cellPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱:" prop="email">
              <el-input v-model.trim="ruleForm.email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="等级" prop="level">
              <el-input v-model.trim="ruleForm.level"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算周期:" prop="days">
              <el-input v-model.trim="ruleForm.days"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商地址" prop="address">
              <el-input v-model.trim="ruleForm.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型:" prop="type">
              <el-select v-model="ruleForm.type" :style="{width: '100%'}">
                <el-option
                  v-for="(item, index) in [{label: '个人', value: '个人'}, {label: '企业', value: '企业'}]"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="营业执照" prop="businessLicence">
              <el-upload
                :style="{height:'70px'}"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :on-remove="remove"
                :on-error="error"
                class="avatar-uploader"
                accept="image/*"
                action="http://192.168.1.68:18082/user/upload/image"
                list-type="picture-card"
              >
                <div
                  class="add"
                  style="position: relative;width:70px;height:70px;border:1px solid #ccc"
                >
                  <img
                    style="position:absolute;left:0px;top:0px;"
                    width="70"
                    height="70"
                    :src="ruleForm.imageUrl"
                    alt
                  />
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注:" prop="notes">
              <el-input v-model.trim="ruleForm.notes"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="create">立即创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSupplier, editSupplier } from "@/api/jxc/supplier.js";
export default {
  name: "addOrEdit",
  props: {
    off: {
      type: Boolean
    },
    rowData: {
      type: Object
    },
    title: {
      type: String
    }
  },
  watch: {
    off(val) {
      if (val) {
        if (this.title == "修改供应商") {
            this.ruleForm = this.rowData;
            this.ruleForm.imageUrl = this.rowData.businessLicence;
        }
      }
    }
  },
  data() {
    return {
      retainTime: [
        { label: "30分钟", value: "30分钟" },
        { label: "一天", value: "1天" },
        { label: "二天", value: "2天" }
      ],
      rules: {
        providerNo: [
          { required: true, message: "供应商不能为空", trigger: "blur" },
          { type: "number", message: "供应商必须为数字值" }
        ],
        platform: [
          { required: true, message: "平台不能为空", trigger: "change" }
        ],
        deliveryValue: [
          { required: true, message: "目标人群不能为空", trigger: "change" }
        ],
        sendTime: [
          { required: true, message: "定时不能为空", trigger: "blur" }
        ],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }]
      },
      ruleForm: {
        imageUrl: ""
      }
    };
  },
  methods: {
    remove(file, fileList) {
      console.log(file, fileList);
      this.ruleForm.imageUrl = "";
    },
    error(err, file, fileList) {
      console.log(err, file, fileList);
    },
    handleAvatarSuccess(res, file) {
      console.log("上传成功res", res);
      console.log("上传成功file", file);
      this.ruleForm.imageUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },
    handClose() {
      this.$emit("update:off", false);
      console.log(this.$refs.ruleForm);
      this.ruleForm.imageUrl = "";
      this.$refs.ruleForm.resetFields();
    },
    create() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return;
        } else {
          if (this.title == "新增供应商") {
            addSupplier(this.ruleForm).then(
              res => {
                console.log("res新增供应商成功", res);
                this.$message({
                  type: "success",
                  message: "新增供应商成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {}
            );
          }else{
              delete this.ruleForm.imageUrl;
              editSupplier(this.ruleForm).then(
              res => {
                console.log("res修改供应商成功", res);
                this.$message({
                  type: "success",
                  message: "修改供应商成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {
                  this.$notify({
                      type: "error",
                      message: err.message
                  });
              }
            );
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
/deep/.el-upload--picture-card {
  width: 70px;
  height: 70px;
  border: none;
}
</style>